<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card>
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <div>
          <div class="avatar-box">
            <UserAvatar />
          </div>
          <ul class="list-group">
            <li class="item">
              <div class="item-left">
                <svg-icon name="user" />
                <span class="title">用户名称</span>
              </div>
              <div class="pull-right">{{ user.userName }}</div>
            </li>
            <li class="item">
              <div class="item-left">
                <svg-icon name="phone" />
                <span class="title">手机号码</span>
              </div>
              <div class="pull-right">{{ user.phonenumber }}</div>
            </li>
            <li class="item">
              <div class="item-left">
                <svg-icon name="email" />
                <span class="title">用户邮箱</span>
              </div>
              <div class="pull-right">{{ user.email }}</div>
            </li>
            <li class="item">
              <div class="item-left">
                <svg-icon name="tree" />
                <span class="title">所属部门</span>
              </div>
              <div class="pull-right">{{ user.dept.deptName }} / {{ user.postGroup }}</div>
            </li>
            <li class="item">
              <div class="item-left">
                <svg-icon name="peoples" />
                <span class="title">所属角色</span>
              </div>
              <div class="pull-right">{{ user.roleGroup }}</div>
            </li>
            <li class="item">
              <div class="item-left">
                <svg-icon name="date" />
                <span class="title">创建日期</span>
              </div>
              <div class="pull-right">{{ user.createTime }}</div>
            </li>
          </ul>
        </div>
      </el-card>
      <el-button style="margin-top: 10px;" @click="refush">组件刷新</el-button>
    </el-col>
    <el-col :span="16">
      <el-card>
        <div slot="header">
          <span>基本资料</span>
        </div>
        <div class="conetent">这里是基本资料详情，时间原因，我就不写了。</div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import UserAvatar from './UserAvatar.vue'
import {inject} from 'vue'

const user = {
  userName: '张三',
  createTime: '2022',
  email: '2695098023@qq.com',
  phonenumber: '15881148873',
  dept: {
    deptName: '西南军区'
  },
  roleGroup: '厂长',
  postGroup: '测试'
}
// 刷新当前组件测试使用
console.log('刷新箭头')

// 获取刷新的函数，再调用
const goRefresh = inject('reload')
function refush() {
  goRefresh()
}
</script>

<style lang="scss" scoped>
.avatar-box {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-group {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      margin-left: 10px;
    }
  }
}
.conetent {
  margin-top: 20px;
}
</style>